<template>
  <div>
    <div class="ticker-xl-box">
      <!--<div class="watch-drop-box" @click="onTitle">-->
      <!--<img src="./eth.png" class="ticker-logo"/>-->
      <!--<span class="ticker-title">ETH/USDT</span>-->
      <!--<i class="el-icon-arrow-down"></i>-->
      <!--</div>-->

      <!--<el-button class="watch-drop-box" @click="drawer = true">-->
        <!--<img src="./eth.png" class="ticker-logo"/>-->
        <!--<span class="ticker-title">ETH/USDT永续</span>-->
        <!--<i class="el-icon-arrow-down"></i>-->
      <!--</el-button>-->

      <div class="ticker-item">
        <span class="label">开盘价</span><br> <span class="value">￥{{tickerData.open}}</span>
      </div>
      <div class="ticker-item">
        <span class="label">24h最新成交价</span><br> <span class="value">￥{{tickerData.last}}</span>
      </div>
      <div class="ticker-item">
        <span class="label">24h最高价</span><br> <span class="value">￥{{tickerData.high}}</span>
      </div>
      <div class="ticker-item">
        <span class="label">24h最低价</span><br> <span class="value">￥{{tickerData.low}}</span>
      </div>

      <!--<div class="ticker-item"><span>指数价格</span><br> <span>￥1,929.56</span></div>-->
      <!--<div class="ticker-item"><span>标记价格</span><br> <span>￥1,929.56</span></div>-->
      <!--<div class="ticker-item"><span>持仓量</span><br> <span>￥1,929.56</span></div>-->
      <!--<div class="ticker-item"><span>距费用结算</span><br> <span>￥1,929.56</span></div>-->
      <!--<div class="ticker-item"><span>资金费率</span><br> <span>￥1,929.56</span></div>-->
    </div>


    <!--<el-drawer class="drawer" :visible.sync="drawer" direction="ltr" :before-close="handleClose" size="20%">-->
      <!--<span>选择币种</span>-->
    <!--</el-drawer>-->
  </div>
</template>

<script>
  import {ticker} from '@/api/modules/ticker'

  export default {
    name: "DealHeader",
    props: ['currency'],
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '',
        drawer: false,
        tickerData: {}
      }
    },
    created() {
      this.getTrans()
    },
    methods: {
      onTitle() {
        console.log("点击了标签")
      },
      handleClose(done) {
        done();
      },
      getTrans() {
        ticker(this.currency).then(res => {
          this.tickerData = res.data
          console.log("res", res)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .ticker-xl-box {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    display: flex;
    flex: 1;
    flex-direction: row;
    white-space: nowrap;
    -webkit-box-flex: 1;

  }

  .ticker-item {
    height: 50px;
    margin-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    /*border: 1px solid black;*/
    text-align: left;
  }

  .watch-drop-box {
    margin-left: 16px;
    margin-right: 10px;
    line-height: 25px;
    /*height: 50px;*/
    /*margin-left: 5px;*/
    /*padding-left: 10px;*/
    /*padding-right: 10px;*/
    /*padding-top: 15px;*/
    /*!*border: 1px solid black;*!*/
    /*cursor: pointer;*/
  }

  .ticker-title {
    color: black;
    font-size: 16px;
    margin-right: 4px;
    font-weight: 600;
  }

  .ticker-logo {
    height: 25px;
    width: 25px;
    vertical-align: top;
    margin-right: 5px
  }

  .label {
    font-weight: 600;
  }

  .value {
    font-weight: 600;
    color: #409EFF;
  }

  .drawer {
    height: 600px;
    margin-top: 100px
  }

</style>
